<template>
	<div class="enroll">
		<mt-header fixed title="报名参会">
			<router-link to="/" slot="left"><mt-button icon="back">返回</mt-button></router-link>
			<!-- <mt-button icon="more" slot="right"></mt-button> -->
		</mt-header>
		<h3>{{meetingData.name}}</h3>
		<div class="meetinginfo">
			<ul>
				<li>开始时间：{{meetingData.startTime}}</li>
				<li>结束时间：{{meetingData.endTime}}</li>
				<li>会议地址：{{meetingData.address}}</li>
				<li>注册地点：{{meetingData.regAddress}}</li>
				<li>注册费用：{{meetingData.regMoney}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in meetingData.orther">{{item}}</li>
			</ul>
		</div>
		<mt-cell class="cellswitch" title="是否住宿"><mt-switch v-model="staySwitch">{{staySwitch?"是":"否"}}</mt-switch></mt-cell>
		<mt-button type="primary" class="sureBtn" @click="sureBtn" :disabled="hasOrdered">{{hasOrdered?"已报名":"提交报名"}}</mt-button>
	</div>
</template>

<script>
import { Toast,Indicator } from 'mint-ui';
export default{
	data(){
		return{
			meetingData:{},
			staySwitch:false,
			userinfo:null,
			hasOrdered:false
		}
	},
	mounted(){
		Indicator.open();	//loading
		//会议数据
		this.$http.get("meeting.json").then(res=>{
			this.meetingData = res.data
			Indicator.close();	//关闭loading
		}).catch(err=>{
			Indicator.close();	//关闭loading
			Toast({
				message: "服务器请求失败",
				duration: 1000
			})
		})
		
		//读取缓存信息判断是否登录过
		let userinfo = window.localStorage.getItem("zyhtLoginInfo")
		if(userinfo){
			this.userinfo = JSON.parse(userinfo)	//格式转换
		}
		//判断是否已报名
		if(!this.userinfo){
			this.hasOrdered = false
		}else{
			let url = this.baseUrl+"t_sign_up/userInfor"
			let data = `userId=${this.userinfo.id}`
			this.$http.post(url,data).then(res=>{
				this.hasOrdered = res.data
			}).catch(err=>{
				this.hasOrdered = false
			})
		}
	},
	methods:{
		sureBtn(){
			if(this.userinfo){	//已登录直接报名
				//报名请求
				Indicator.open();	//loading
				let url = this.baseUrl+"t_sign_up/signUser"
				let isAcc = this.staySwitch?1:0	//是否住宿
				let data = `userId=${this.userinfo.id}&isAcc=${isAcc}`
				this.$http.post(url,data).then(res=>{
					Indicator.close();	//关闭loading
					if(!res.data.id){	//报名失败
						Toast({
							message: res.data,
							duration: 1000
						})
						return
					}
					//提示
					Toast({
						message: '报名成功,请准时参加',
						duration: 2000
					})
					//报名成功将按钮置灰
					this.hasOrdered = true
				},err=>{
					Indicator.close();	//关闭loading
					console.log(err)
					Toast({
						message: '报名失败',
						duration: 1000
					})
				})
			}else{	//未登陆跳转到登录页
				this.$router.push('/login')
			}
		}
	}
}
</script>

<style lang="scss">
.enroll{
	padding: 30px 0.95rem;
	h3{
		padding-bottom: 10px;
		border-bottom: 1px solid #888;
	}
	.meetinginfo{
		ul{
			margin: 0;
			padding: 20px;
			&:first-child{
				background: deepskyblue;
			}
			&:last-child{
				background: orange;
			}
			li{
				font-size: .9rem;
				text-align: left;
				list-style: none;
			}
		}
	}
	.cellswitch{
		margin:1.875rem 0;
	}
	.mint-cell-title{
		text-align: left;
	}
	.mint-cell-wrapper{
		padding: 0;
		border-bottom: 1px solid #d9d9d9;
	}
	.sureBtn{
		width: 100%;
	}
}
</style>
